import React, { useEffect, useRef, useState } from "react";
import * as echarts from "echarts";
import { Table, Image, Col, Row, Statistic, Switch, Carousel } from "antd";
import { useSize } from "ahooks";
import usePagination from "@/hooks/usePagination";
import { getBannerList } from "@/api/banner";
import { LikeOutlined } from "@ant-design/icons";

export default function Active() {
  // eslint-disable-next-line no-undef

  const [reverse, setReverse] = useState(true);

  useEffect(() => {
    getBannerListData();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  const defaultHeight = document.body.offsetHeight;
  const size = useSize(document.querySelector("body"));
  const [list, setList] = useState([]);
  const flagRef = useRef(true);
  const getBannerListData = () => {
    getBannerList().then((res) => {
      console.log(res.data.data);
      setList(res.data.data);
      if (
        res.data.data.length <=
        pagination.pageSize * (pagination.current - 1)
      ) {
        flagRef.current = false;
      }
    });
  };
  useEffect(() => {
    getBannerListData();

    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  const pagination = usePagination({
    callback() {
      flagRef.current = true;
    },
  });

  useEffect(() => {
    let myChart = echarts.init(document.getElementById("mainn"));
    window.addEventListener("resize", function () {
      myChart.resize();
    });
    myChart.setOption({
      backgroundColor: "#2c343c",
      title: {
        text: "Customized Pie",
        left: "center",
        top: 20,
        textStyle: {
          color: "#ccc",
        },
      },
      tooltip: {
        trigger: "item",
      },
      visualMap: {
        show: false,
        min: 80,
        max: 600,
        inRange: {
          colorLightness: [0, 1],
        },
      },
      series: [
        {
          name: "Access From",
          type: "pie",
          radius: "55%",
          center: ["50%", "50%"],
          data: [
            { value: 335, name: "Direct" },
            { value: 310, name: "Email" },
            { value: 274, name: "Union Ads" },
            { value: 235, name: "Video Ads" },
            { value: 400, name: "Search Engine" },
          ].sort(function (a, b) {
            return a.value - b.value;
          }),
          roseType: "radius",
          label: {
            color: "rgba(255, 255, 255, 0.3)",
          },
          labelLine: {
            lineStyle: {
              color: "rgba(255, 255, 255, 0.3)",
            },
            smooth: 0.2,
            length: 10,
            length2: 20,
          },
          itemStyle: {
            color: "#c23531",
            shadowBlur: 200,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
          animationType: "scale",
          animationEasing: "elasticOut",
          animationDelay: function (idx) {
            return Math.random() * 200;
          },
        },
      ],
    });
  }, []);
  return (
    <div className="active" style={{ display: "flex", flexDirection: "row" }}>
      <main>
        <Carousel autoplay style={{ height: "200px", width: "200px" }}>
          {list.map((item, index) => {
            return (
              <div key={index}>
                <Image src={item.img} />
              </div>
            );
          })}
        </Carousel>
        <div
          id="mainn"
          style={{
            height: "200px",
            width: "200px",
          }}
        ></div>
        <Row gutter={16} style={{ marginTop: "50px" }}>
          <Col span={12}>
            <Statistic
              title="Feedback"
              value={1128}
              prefix={<LikeOutlined />}
            />
          </Col>
          <Col span={12}>
            <Statistic title="Unmerged" value={93} suffix="/ 100" />
          </Col>
        </Row>
      </main>
      <div>
        <Table
          style={{ width: "99%" }}
          dataSource={list} // 数据源
          rowKey={(record) => record.bannerid}
          scroll={{
            y: (size ? size.height : defaultHeight) - 320, //窗口自适应
          }}
          pagination={pagination} //分页
        >
          <Table.Column
            title="序号"
            render={(_, record, index) => {
              return (
                <span>
                  {pagination.pageSize *
                    (flagRef.current
                      ? pagination.current - 1
                      : pagination.current - 2) +
                    index +
                    1}
                </span>
              );
            }}
          ></Table.Column>
          <Table.Column
            title="图片"
            dataIndex={"img"}
            render={(text) => {
              return <Image src={text} style={{ height: 100 }} />;
            }}
          ></Table.Column>

          <Table.Column title="是否参与活动" dataIndex={"flag"}>
            <Switch
              size="small"
              checked={reverse}
              onChange={setReverse}
            ></Switch>
          </Table.Column>

          <Table.Column title="折扣额度" dataIndex={"link"}></Table.Column>
        </Table>
      </div>
    </div>
  );
}
